<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			overflow: hidden;
		}
		li{
			width: 100px;
			height: 50px;
			border:1px solid #fff;
			float: left;
			list-style: none;
			text-align: center;
			line-height: 50px;
			background-color: #ccc;
		}
		div{
			width: 304px;
			height: 300px;
			display: none;
			border:1px solid #fff;
			border-top: none;
		}
		.active{
			color: white;
			background-color: red;
			border-bottom: 1px solid red;
		}
		.show{
			display: block;
			background-color: red;
			color: yellow;
		}
	</style>
</head>
<body>
	<ul>
		<li class="active">充话费</li>
		<li>车险</li>
		<li>游戏</li>
	</ul>
	<div class="show">充话费</div>
	<div>车险</div>
	<div>游戏</div>
	<script>
		var lis=document.getElementsByTagName('li');
		var divs=document.getElementsByTagName('div');
		for (var i = 0; i < lis.length; i++) {
			lis[i].value=i;
			
			lis[i].onmouseover=function(){
				var lisval=this.value;
				for (var i = 0; i < lis.length; i++) {
					lis[i].className="";
				}
				this.className="active";
				for (var i = 0; i < divs.length; i++) {
					divs[i].className="";
					divs[lisval].className="show";
				}
			}
		}
	</script>
</body>
</html>